<template>
	<div>
		<grid class="memberStatusTitle" :show-vertical-dividers="false">
			<grid-item @click.native="orderByFunc('quality_tag')">
				<span class="grid-center" style="margin-left: 10px;">质量<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('name')">
				<span class="grid-center" style="margin-left: 10px;">姓名<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('age')">
				<span class="grid-center" style="margin-left: 10px;">年龄<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('channel_tag')">
				<span class="grid-center" style="margin-left: 10px;">渠道<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('days')">
				<span class="grid-center" style="margin-left: 10px;">时间<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
		</grid>

		<scroller :on-refresh="refresh" :on-infinite="infinite" :noDataText="noDataText" ref="notAssignedCustomers">
			<group id="commonScroller" class="commonScrollerCustomer">
				<grid class="tableListCell" v-for="item in items" :show-vertical-dividers="false">
					<grid-item>
						<span v-if="item.quality_tag == null" class="grid-center">未填</span>
						<span class="grid-center">{{item.quality_tag}}</span>
					</grid-item>
					<grid-item @click.native="jumpTo(item.id)">
						<span class="grid-center-name">{{item.name.substring(0,3)}}</span>
					</grid-item>
					<grid-item>
						<span v-if="item.age == null" class="grid-center">未填</span>
						<span v-else class="grid-center">{{item.age}}</span>
					</grid-item>
					<grid-item>
						<span v-if="item.channel_tag == null" class="grid-center">无</span>
						<span v-else class="grid-center">{{item.channel_tag}}</span>
					</grid-item>
					<grid-item>
						<span class="grid-center">{{item.days+'天'}}</span>
					</grid-item>
				</grid>
			</group>
		</scroller>
	</div>
</template>

<script>
	import Vue from 'vue'
	import DateUtil from '../../../utils/date'
	import NetWorking from '../../../utils/networking'
	import { Group, Cell, ConfirmPlugin, Tab, TabItem, FormPreview, Grid, GridItem} from 'vux'
	import VueScroller from 'vue-scroller'
	Vue.use(VueScroller)
	Vue.use(ConfirmPlugin)

	const SIZE = 20

	export default {
		name: "scrollerNotAssignedCustomer",
		components: {
			Group,
			Cell,
			Tab,
			TabItem,
			FormPreview,
			Grid,
			GridItem
		},
		props: ['curURL', 'jumpToObjectDetails'],
		data() {
			return {
				orderBy: 'update_time',
				sequence: 'desc',
				noDataText: '',
				map: '',
				offset: 0,
				limit: SIZE,
				noMoreData: false,
				items: [],
				list: [],
				feedbackBtn: [{
					style: 'primary',
					text: '查看学员',
					onButtonClick: (id) => {
						//alert(`clicking ${id}`)
						this.$router.push({ name: "customerDetails", params: { id: id, index: 1}})
					}
				},{
					style: 'primary',
					text: '编辑学员',
					onButtonClick: (id) => {
						//alert(`clicking ${id}`)
						this.$router.push({ name: "updateCustomer", params: { id: id, index: 1}})
					}
				}]
			}
		},
		watch: {
			curURL: function () {
				this.resetData()
			},
			orderBy: function () {
				this.resetData()
			},
			sequence: function () {
				this.resetData()
			},
			status: function () {
				this.resetData()
			}
		},
		created: function () {

			if(sessionStorage.orderByNotAssigned != null){
				this.orderBy = sessionStorage.orderByNotAssigned
			}

			if(sessionStorage.sequenceNotAssigned != null){
				this.sequence = sessionStorage.sequenceNotAssigned
			}

			this.map = new Map()
			let _this = this
			NetWorking.doGet(
				'list_of_value/getListOfValueByType',
				null,
				{
					params:{
						type: 'S_LOV_OPP_STAGE'
					}
				}
			).then(
				response => {
					let rs = response.data
					if(rs.error_code == 0){
						for(var i=0; i<rs.list_of_value.length; i++){
							_this.map.set(rs.list_of_value[i].id, rs.list_of_value[i].value)
						}
					}else{
						alert(rs.error_code)
					}
				}
			)
		},
		methods:{
			orderByFunc: function (value) {
				this.orderBy = value
				if(this.sequence == 'asc'){
					this.sequence = 'desc'
				}else{
					this.sequence = 'asc'
				}
				sessionStorage.orderByNotAssigned = this.orderBy
				sessionStorage.sequenceNotAssigned = this.sequence
			},
			resetData() {
				this.noDataText = ''
				this.offset = 0
				this.limit = SIZE
				this.noMoreData = false
				this.items = []
				this.$refs.notAssignedCustomers.finishPullToRefresh(false)
				this.$refs.notAssignedCustomers.finishInfinite(false)
			},
			refresh (done) {
				this.$refs.notAssignedCustomers.finishPullToRefresh(true)
				return
			},
			infinite (done) {
				if(this.noMoreData){
					this.noDataText = '没有更多记录了——总' + this.items.length + '条'
					this.$refs.notAssignedCustomers.finishInfinite(true)
					return
				}else{
					let _this = this
					_this.offset += 1
					this.isRunning = true
					NetWorking.doGet(
						this.curURL,
						null ,
						{
							params:{
								offset: _this.offset,
								limit: _this.limit,
								orderBy: _this.orderBy,
								sequence: _this.sequence
							}
						}
					).then(
						response => {
							let res = response.data
							if (res.error_code == 0) {
								if(res.page_info.list.length >= 0){
									_this.items.push.apply(_this.items, res.page_info.list)
									_this.bottom += res.page_info.list.length
									//set noMoreData flag to true if current size < limit
									if(res.page_info.list.length < _this.limit){
										_this.noMoreData = true
										_this.$refs.notAssignedCustomers.finishInfinite(true);
									}
								}
							} else {
								alert(res.error_message)
							}
							done()
						}
					)
				}
			},
			jumpTo: function (id) {
				//组件间传递参数
				this.$router.push({ name: "customerDetails", params: { id: id, index: 1}})
			},
			showDeleteButton(index, activity) {

				let hasAdminRole = false
				for(var i=0; i < this.$store.state.user.userModel.sysRoleList.length; i++){
					if(this.$store.state.user.userModel.sysRoleList[i].role_name == 'admin'){
						hasAdminRole = true
					}
				}
				if(hasAdminRole == false){
					return
				}

				var _this = this;
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(function() {
					let thisObj = this
					thisObj.$vux.confirm.show({
						title: '系统提示',
						content: '确认要删除吗?',
						onConfirm () {
							NetWorking.doDelete(
								'/activities',
								null,
								{
									params: {
										id: activity.id
									}
								}
							).then(
								response => {
									let rs = response.data
									if(rs.error_code == 0){
										_this.items.splice(index, 1);
									}else{
										alert(rs.error_message);
									}
								}
							)
						}
					})
				}.bind(this), 1000);
			},
			clearLoop(id) {
				clearInterval(this.Loop);
			}
		}
	}
</script>

<style>
	.commonScrollerCustomer{
		margin-top: 122px;
	}

	.tableListCell {
		font-size: 12px;
	}

	.tableListCell > .weui-grid {
		text-decoration: none;
	}

	.grid-center {
		display: block;
		text-align: center;
		color: #666;
	}

	.grid-center-name{
		display: block;
		text-align: center;
		color: #43abe3;
	}

	.notAssignedCustomers {
		margin-top: 76px;
	}

	.notAssignedCustomers > .weui-cells:before {
		border-top: none;
	}

	.formCard {
		border: solid;
		border-color: #f7f7fa;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 20px;
		margin-bottom: 20px;
		border-radius: 25px;
		box-shadow: 5px 5px 5px #888888;
	}

	.formCard > .weui-form-preview__hd .weui-form-preview__value{
		font-size: .9em !important;
		color: #999999
	}

	.tag {
		text-align: right;
		background: red;
		width: fit-content;
		color: white;
		padding-left: 5px;
		border-radius: 5px;
		padding-right: 5px;
		font-size: 13px;
	}

	.itemTime {
		display: block;
		-webkit-margin-before: 1em;
		-webkit-margin-after: 1em;
		-webkit-margin-start: 0px;
		-webkit-margin-end: 0px;
		line-height: 1.41176471;
		font-size: 13px;
	}
</style>